<div id="WorkflowAdmin">
    <nz-card nzTitle="Icon" class="coloredTitle">
        <form nz-form>
            <nz-form-item>
                <nz-form-label [nzSpan]="3">Select icon</nz-form-label>
                <nz-form-control>
                    <app-upload-button accept=".png,.jpg,.jpeg" image="true" (event)="fileEvent($event)">
                    </app-upload-button>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <img class="wf-icon" [src]="_workflow.icon" alt="application icon" *ngIf="_workflow.icon">
            </nz-form-item>
            <nz-alert nzType="error" nzMessage="Your file is too large (max 100Ko)" *ngIf="fileTooLarge"></nz-alert>
            <nz-form-item nzJustify="end">
                <button nz-button nzDanger nzType="primary" class="multipleButtons"  [nzLoading]="loading" *ngIf="!iconUpdated && workflow.icon"
                        name="deleteiconButton" (nzOnConfirm)="deleteIcon()" nz-popconfirm
                        nzPopconfirmTitle="Are you sure you want to delete the workflow icon ?">Delete
                </button>
                <button nz-button nzType="primary" [nzLoading]="loading" name="updateiconButton"
                        (click)="updateIcon()" >Save
                </button>
            </nz-form-item>
        </form>
    </nz-card>
    <nz-card nzTitle="Settings" class="coloredTitle">
        <form nz-form (ngSubmit)="onSubmitWorkflowUpdate()">
            <nz-form-item>
                <nz-form-label [nzSpan]="6">Workflow name</nz-form-label>
                <nz-form-control>
                    <input nz-input type="text" name="formWorkflowUpdateName"
                           [disabled]="loading || (workflow.from_repository && workflow.from_repository.length > 0)"
                           [(ngModel)]="workflow.name" [disabled]="loading" required #formWorkflowUpdateName="ngModel"
                           pattern="^[a-zA-Z0-9._-]{1,}$">
                    <nz-alert nzType="error" *ngIf="formWorkflowUpdateName && formWorkflowUpdateName.invalid && !formWorkflowUpdateName.pristine"
                        nzMessage="Invalid workflow name. Allowed pattern is: ^[a-zA-Z0-9._-]{1,}$"></nz-alert>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSpan]="6">Description</nz-form-label>
                <nz-form-control>
                    <textarea nz-input name="description" [(ngModel)]="_workflow.description"
                        [disabled]="loading"></textarea>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSpan]="6">
                    Add sidebar's tags
                </nz-form-label>
                <nz-form-control>
                    <ng-container *ngIf="existingTags.length > 0">
                        <div class="selectTag">
                            <nz-select name="tags" nzShowSearch [nzLoading]="loading" [(ngModel)]="tagsToAdd" nzMode="multiple">
                                <nz-option *ngFor="let i of existingTags" [nzValue]="i" [nzLabel]="i"></nz-option>
                            </nz-select>
                            <button nz-button (click)="updateTagMetadata()" type="button" [disabled]="!tagsToAdd">
                                <i nz-icon nzType="plus" nzTheme="outline"></i>
                            </button>
                        </div>
                    </ng-container>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSpan]="6">Current tags <i nz-icon nzType="question-circle" nzTheme="outline" nz-tooltip nzTooltipTitle="Drag & drop to modify tags order (order by priority)"></i></nz-form-label>
                <nz-form-control>
                    <ng-container *ngIf="selectedTags && selectedTags.length > 0">
                        <div class="dragula-container" [dragula]="'bag-tag'"
                             [(dragulaModel)]="selectedTags">
                            <nz-tag *ngFor="let t of selectedTags; let i = index">
                                {{t + ' '}}
                                <i nz-icon nzType="close" nzTheme="outline"  *ngIf="workflow.permissions.writable" (click)="removeFromSelectedTags(i)"></i>
                            </nz-tag>
                        </div>
                    </ng-container>
                    <ng-container *ngIf="!selectedTags || selectedTags.length === 0">
                        <nz-alert nzType="info" nzMessage="There is no sidebar's tag"></nz-alert>
                    </ng-container>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item *ngIf="!retentionRunsPolicyEnabled">
                <nz-form-label [nzSpan]="6">Maximum number of workflow runs</nz-form-label>
                <nz-form-control>
                    <input nz-input type="number" name="formWorkflowUpdateHistory" [disabled]="loading"
                           [(ngModel)]="_workflow.history_length" required
                           #formWorkflowUpdateHistory="ngModel" min="1" max="500">
                </nz-form-control>
            </nz-form-item>
            <nz-form-item *ngIf="!retentionRunsPolicyEnabled">
                <nz-form-label [nzSpan]="6">Purge tags</nz-form-label>
                <nz-form-control>
                    <div class="selectTag">
                        <nz-select nzShowSearch nzMode="multiple" name="sidebartagzonehistory" [(ngModel)]="tagsToAddPurge" [nzLoading]="loading">
                            <nz-option *ngFor="let i of existingTagsPurge" [nzValue]="i" [nzLabel]="i">
                            </nz-option>
                        </nz-select>
                        <button nz-button (click)="updateTagPurge()" type="button" [disabled]="!tagsToAddPurge"><i nz-icon nzType="plus" nzTheme="outline"></i></button>
                    </div>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item *ngIf="!retentionRunsPolicyEnabled">
                <nz-form-label [nzSpan]="6">Current purge tags</nz-form-label>
                <nz-form-control>
                    <ng-container *ngIf="selectedTagsPurge && selectedTagsPurge.length > 0">
                        <div class="dragula-container" [dragula]="'bag-tag'"
                             [(dragulaModel)]="selectedTagsPurge">
                            <nz-tag *ngFor="let t of selectedTagsPurge; let i = index">
                                {{t + ' '}}
                                <i nz-icon nzType="close" nzTheme="outline"  *ngIf="workflow.permissions.writable"
                                       (click)="removeFromSelectedTagsPurge(i)"></i>
                            </nz-tag>
                        </div>
                    </ng-container>
                    <ng-container *ngIf="!selectedTagsPurge || selectedTagsPurge.length === 0">
                        <nz-alert nzType="info" nzMessage="There is no purge tag"></nz-alert>
                    </ng-container>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item *ngIf="maxRunsEnabled">
                <nz-form-label [nzSpan]="6">Maximum number of workflow runs</nz-form-label>
                <nz-form-control>
                    {{workflow.max_runs}}
                    <i nz-icon nzType="question-circle" nzTheme="outline" nz-tooltip nzTooltipTitle="You can contact a CDS administrator to customize this value"></i>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item  *ngIf="retentionRunsPolicyEnabled && apiConfig">
                <nz-form-label [nzSpan]="6">Workflow run retention policy <i nz-icon nzType="question-circle" nzTheme="outline" nz-popover [nzPopoverContent]="popupRetention"  nzPopoverTrigger="hover"></i></nz-form-label>
                <ng-template #popupRetention>
                    <div class="retentionTooltip">
                        You can set a custom lua retention policy rule for this workflow.
                        Available variables are: {{availableStringVariables}}.
                        <br />
                        <br />
                        More informations and examples in CDS documentation
                        <a class="item" target="_blank" rel="noopener noreferrer" href="#"
                           [routerLink]="['/docs', 'docs', 'concepts', 'workflow', 'retention']">
                            here</a>.
                    </div>

                </ng-template>
                <nz-form-control>
                    <codemirror name="policy" [placeholder]="apiConfig?.default_run_retention_policy"
                                (change)="changeCodeMirror(codemirrorRetentionPolicy)"
                                [(ngModel)]="workflow.retention_policy" [config]="codeMirrorConfig"
                                #codemirrorRetentionPolicy></codemirror>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item  *ngIf="retentionRunsPolicyEnabled && apiConfig" nzJustify="end">
                <button nz-button  type="button" name="dryrun" [nzLoading]="loading"
                        (click)="retentionPolicyDryRun()">
                    Dry run
                </button>
                <nz-modal [(nzVisible)]="dryRunModalVisible" (nzOnCancel)="dryRunModalVisible = false" nzTitle="{{ 'workflow_retention_policy' | translate }}" nzWidth="900px">
                    <div *nzModalContent>
                        <ng-container>
                            <div *ngIf="dryRunWarnings && dryRunWarnings?.length > 0">
                                <nz-collapse>
                                    <ng-template #warningTmpl>
                                        <nz-tag [nzColor]="'red'">{{dryRunWarnings.length}}</nz-tag>
                                        Errors
                                    </ng-template>
                                    <nz-collapse-panel [nzHeader]="warningTmpl" [nzActive]="true">
                                        <ul>
                                            <li *ngFor="let w of dryRunWarnings">{{w}}</li>
                                        </ul>
                                    </nz-collapse-panel>
                                </nz-collapse>
                            </div>
                            <div class="alignRight">
                                <ng-container *ngIf="dryRunStatus === 'INCOMING'">
                                    <i nz-icon [nzType]="'sync'" [nzSpin]="true" class="blue"></i>
                                </ng-container>
                                <ng-container *ngIf="dryRunStatus === 'ERROR'">
                                    <i nz-icon nzType="close-circle" nzTheme="outline" class="red"></i>
                                </ng-container>
                                <ng-container *ngIf="dryRunStatus === 'DONE'">
                                    <i nz-icon nzType="check-circle" nzTheme="outline" class="green"></i>
                                </ng-container>
                                {{dryRunAnalyzedRuns + ' / ' + dryRunMaxDatas + ' run analyzed ( ' +
                            dryRunDatas.length + ' runs kept )'}}
                            </div>
                        </ng-container>
                        <ng-container
                                *ngIf="dryRunStatus === 'DONE' && (!dryRunDatas || dryRunDatas.length === 0)">
                            <nz-alert nzType="info" nzMessage="All runs would be deleted"></nz-alert>
                        </ng-container>
                        <ng-container *ngIf="dryRunDatas?.length > 0">
                            <div class="dryrun">
                                <h4>{{'workflow_retention_result_title' | translate }}</h4>
                                <app-data-table [withFilter]="" [columns]="dryRunColumns" [data]="dryRunDatas"
                                                [withPagination]="10"></app-data-table>
                            </div>
                        </ng-container>
                    </div>
                    <div *nzModalFooter>
                        <button nz-button (click)="dryRunModalVisible = false" autofocus>Close</button>
                    </div>
                </nz-modal>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label>Current run number</nz-form-label>
                <nz-form-control>
                    <input nz-input type="number" name="formWorkflowRunNumUpdateNumber"
                           [(ngModel)]="runnumber" required
                           #formWorkflowRunNumUpdateNumber="ngModel">
                </nz-form-control>
            </nz-form-item>
            <nz-form-item nzJustify="end">
                <button nz-button nzType="primary" type="submit" name="savebtn" [nzLoading]="loading"
                        [disabled]="loading">
                    <span *ngIf="!editMode">Save</span>
                    <span *ngIf="editMode">Apply</span>
                </button>
            </nz-form-item>
        </form>
    </nz-card>
    <nz-card nzTitle="Integrations" class="coloredTitle">
        <form nz-form>
            <nz-form-item>
                <nz-form-label>Link an integration</nz-form-label>
                <nz-form-control>
                    <div class="selectTag">
                        <nz-select nzShowSearch name="selectIntegration" [(ngModel)]="selectedIntegration" placeholder="Link an integration...">
                            <nz-option *ngFor="let t of filteredIntegrations" [nzValue]="t" [nzLabel]="t.name"></nz-option>
                        </nz-select>
                        <button nz-button type="button" nzType="primary" [nzLoading]="loading" (click)="addIntegration()"><i nz-icon nzType="plus" nzTheme="outline"></i>Link</button>
                    </div>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item *ngIf="_workflow?.integrations?.length > nbEventIntegrations">
                <nz-form-label>Configuration</nz-form-label>
                <nz-form-control>
                    <nz-table [nzData]="_workflow.integrations | callback: filterIntegration" #integList>
                        <thead>
                        <tr>
                            <th nzWidth="100px">Name</th>
                            <th nzWidth="10px"></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr *ngFor="let integ of integList.data">
                            <td>
                                {{integ.project_integration.name}}
                            </td>
                            <td class="alignRight">
                                <button nz-button nzDanger nzType="primary" type="button" name="deleteBtn" [nzLoading]="loading"
                                        nz-popconfirm nzPopconfirmTitle="Are you sure you want to unlink this integration ?"
                                        (nzOnConfirm)="clickDeleteIntegration(integ)">
                                    Unlink
                                </button>
                            </td>
                        </tr>
                        </tbody>
                    </nz-table>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item  *ngIf="!_workflow?.integrations || _workflow.integrations.length === nbEventIntegrations">
                <nz-form-control>
                    <nz-alert nzType="info" nzMessage="There is no linked integration on this workflow"></nz-alert>
                </nz-form-control>
            </nz-form-item>
        </form>
    </nz-card>
    <nz-card nzTitle="Danger zone" class="redTitle">
        <nz-row>
            <nz-col [nzSpan]="12">
                <div class="title">Delete workflow</div>
                <div class="description">Once you delete a workflow, there is no going back. Please be certain.</div>
            </nz-col>
            <nz-col [nzSpan]="12" class="alignRight">
                <button nz-button nzDanger nzType="primary" [nzLoading]="loading"
                        (click)="deleteWorkflow()">Delete</button>
            </nz-col>
        </nz-row>
    </nz-card>
</div>
